<template>
	<div>
		<el-form class="form-container" v-loading="formLoading" :rules="rules" :model="postForm" ref="postForm" label-width="200px" label-position="right">
      <el-form-item label="公司名称：" >
        <el-input v-model.trim="postForm.companyName" placeholder="公司名称" style="width: 400px"></el-input>
        <span class="el-form-tip">（公司名称会在首页顶部展示）</span>
      </el-form-item>
      <el-form-item label="公司logo(宽230*高230)：" >
        <el-upload
          class="avatar-uploader"
          name="avatar"
          :action="companyUploadUrl"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :on-success="handleLogoSuccess">
          <img v-if="postForm.logo" :src="postForm.logo" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-button @click="postForm.logo = ''">置空</el-button>
        <span class="el-form-tip">（图片为 png/jpg 格式，大小不能超过 3M）</span>
      </el-form-item>
      <el-form-item label="公司简介：" prop="intro">
        <p>此内容会在公司简介页面展示，建议单张图片宽750px,高度范围50~1200px,大小不能超过3M</p>
        <tinymce :height="300" v-model="postForm.intro" style="width: 80%"></tinymce>
        <!-- <editor id="editor_id" height="500px" width="750px" :content="postForm.intro"
            :uploadJson="imageUploadUrl"
            pluginsPath="/static/kindeditor/plugins/"
            :loadStyleMode="false"
            @on-content-change="onContentChange"></editor> -->
      </el-form-item>
      <el-form-item v-if="permission == 3" style="padding: 10px 0">
        <el-button type="primary" v-loading="btnLoading" icon="el-icon-check" @click="submitForm">保存</el-button>
      </el-form-item>
		</el-form>
	</div>
</template>
<script>
import Tinymce from '@/components/Tinymce'
import { getCompanyDetail, saveCompanyDetail } from '@/api/basicDatum'
import { shopManage_basicDatum } from '@/utils/permission'
import authority from '@/components/noneTemplate/authority.vue'
const postForm = {
  companyName: null,
  logo: null,
  intro: null
}

const rules = {
  companyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
  logo: [{ required: true, message: '请上传logo图', trigger: 'change' }],
  intro: [{ required: true, message: '请输入公司简介', trigger: 'blur' }]
}

export default {
  name: 'companyDetail',
  components: { Tinymce },
  data() {
    return {
      permission: 3,
      postForm: Object.assign({}, postForm),
      rules,
      btnLoading: false,
      formLoading: false,
      /*imageUploadUrl: process.env.BASE_API + '/common/editor/imageUpload',*/
      companyUploadUrl: process.env.BASE_API + '/common/companies/imageUpload'
    }
  },
  created() {
    this.getModelPermission()
    this.initData()
  },
  methods: {
    onContentChange (val) {
      this.postForm.intro = val
    },


    getModelPermission() {
      this.permission = shopManage_basicDatum()
    },
    initData() {
      getCompanyDetail().then(res => {
        if (res.data.data) {
          this.postForm = res.data.data
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleLogoSuccess(res, file) {
      if (res.statusCode == 200) {
        this.postForm.logo = res.data.imageUrl
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt3M = file.size / 1024 / 1024 < 3
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式')
      }
      if (!isLt3M) {
        this.$message.error('上传图片大小不能超过 3MB')
      }
      return isJPG && isLt3M
    },
    submitForm() {
      if (this.postForm.logo == null) {
        this.$message.warning('请上传公司logo')
        return
      }

      this.$refs.postForm.validate(valid => {
        if (valid) {
          if (this.btnLoading) {
            return
          }
          this.btnLoading = true
          this.formLoading = true
          saveCompanyDetail(this.postForm).then(res => {
            this.btnLoading = false
            this.formLoading = false
            this.$message.success('保存成功')
          }).catch(err => {
            this.btnLoading = false
            this.formLoading = false
            console.log(err)
          })
        } else {
          this.btnLoading = false
          this.formLoading = false
          console.log('error submit!')
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
  p{
    margin: 0;
  }
	/* #mapContainer{
		width: 500px;
		height: 300px;
		margin-left: 130px;
		margin-top: 20px;
	} */
</style>
